<template>
    <div>
        <audio style="display:none;" ref="newmsg" src="../assets/2.mp3"></audio>
        <audio style="display:none;" ref="subscribe" src="../assets/1.mp3"></audio>
        <audio style="display:none;" ref="unsubscribe" src="../assets/3.mp3"></audio>
            <div id="loading" ref="pagesLoad" v-if="pagesLoad">
            <img src="../assets/aaa.svg"/>
        </div>
        <div id="msg_box">
            <div class="top">
                <van-nav-bar  :title="msg_user.nickname"  left-arrow  @click-left="msgBoxGoBack">
                    <van-icon name="records" slot="right" @click.native="openChatRecord"/>
                </van-nav-bar>
                
            </div>
            <div class="msg" ref="msglist" :class="{open:isshow.msg_box_item.isopen}">
                <div class="list">
                    <div class="item" v-for="(item,index) in msg_user.msg_list" :key="index" :type="item.send_type">
                        <div class="tips" v-if="item.type == 'unsubscribe' || item.type == 'subscribe'">
                            <span v-if="item.type == 'unsubscribe'">该用户取消关注</span>
                            <span v-if="item.type == 'subscribe'">新用户关注</span>
                        </div>
                        
                        <div class="headpic" v-if="item.send_type == 1001 && item.type !='unsubscribe' && item.type != 'subscribe'">
                            <img :src="msg_user.headimgurl">
                        </div>
                        <div class="headpic" v-else-if="item.send_type == 1002 && item.type !='unsubscribe' && item.type != 'subscribe'">
                            <img :src="cs_user.header_url?URL.server+cs_user.header_url:'http://suo.im/4nci1t'">
                        </div>
                        <div class="content" v-if="item.type == 'text'&&item.type !='unsubscribe' && item.type != 'subscribe'" type="text">
                            <pre>{{item.content}}</pre>
                            <div class="status" :type="item.send_state" v-if="item.send_type == 1002"></div>
                        </div>
                        <div class="content pic" v-if="item.type == 'image'&&item.type !='unsubscribe' && item.type != 'subscribe'" type="text">
                            <img class="msgpic" preview="0"  :src="item.content"/>
                            <div class="status" :type="item.send_state" v-if="item.send_type == 1002"></div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div  class="input" :class="{open:isshow.msg_box_item.isopen}">
                <div @click="openMsgBoxItem('voice')" class="voice opt_btn"><img src="../assets/yuyin.png" alt=""></div>
                <input ref="msg_input" @keydown="enterMsg" type="text" v-model="msg_user.msg_input"  placeholder="请输入消息..."/>
                <div @click="openMsgBoxItem('faces')" class="faces opt_btn"><img src="../assets/face.png" alt=""></div>
                <div v-if="!msg_user.msg_input" @click="openMsgBoxItem('more')" class="more opt_btn"><img src="../assets/more.png" alt=""></div>
                <button v-if="msg_user.msg_input" @click="sendTextMsg">发送</button>
            </div>
            <div  @click.stop="stopdefault" class="optbox" :class="{open:isshow.msg_box_item.isopen}" :type="isshow.msg_box_item.type"
             tabindex="0" hidefocus="true" @blur="closeMsgBoxItem">
             
                <van-row gutter="10" v-if="isshow.msg_box_item.type == 'more'">
                    <van-col span="6" class="item">
                        <van-uploader :after-read="sendPicMsg" accept="image/*" :max-size="1024000" @oversize="$toast('图片大小限制，建议上传10M以内的图片。');">
                            <div class="icon">
                                <img src="../assets/pic.png" />
                            </div>
                            <span>相片</span>
                        </van-uploader>
                    </van-col>
                    <van-col span="6" class="item" @click.native="openChatRecord">
                        <div class="icon">
                            <img src="../assets/jilu.png" />
                        </div>
                        <span>聊天记录</span>
                    </van-col>
                </van-row>
                <span v-else-if="isshow.msg_box_item.type == 'voice'" @touchstart="startRecord" @touchend="startRecord">
                    <img src="../assets/yuy.png" />
                </span>
                <div class="imgpic" v-else-if="isshow.msg_box_item.type == 'faces'">
                    <img @click="addendFaces(item.value)" :src="item.url" :value="item.value" v-for="(item,index) in face_list.list" :key="index"  />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data() {
            return {
                pagesLoad:true,
                cs_user:{},
                msg_user:{},
                isshow:{
                    msg_box_item:{
                        isopen:false,
                        type:''
                    }
                },
                face_list:{
                    isopen:false,
                    list:[
                        { value: "[微笑]", url: "http://crm.wqc.so/assets/expression/0.gif" },
                        { value: "[撇嘴]", url: "http://crm.wqc.so/assets/expression/1.gif" },
                        { value: "[色]", url: "http://crm.wqc.so/assets/expression/2.gif" },
                        { value: "[发呆]", url: "http://crm.wqc.so/assets/expression/3.gif" },
                        { value: "[得意]", url: "http://crm.wqc.so/assets/expression/4.gif" },
                        { value: "[流泪]", url: "http://crm.wqc.so/assets/expression/5.gif" },
                        { value: "[害羞]", url: "http://crm.wqc.so/assets/expression/6.gif" },
                        { value: "[闭嘴]", url: "http://crm.wqc.so/assets/expression/7.gif" },
                        { value: "[睡]", url: "http://crm.wqc.so/assets/expression/8.gif" },
                        { value: "[大哭]", url: "http://crm.wqc.so/assets/expression/9.gif" },
                        { value: "[尴尬]", url: "http://crm.wqc.so/assets/expression/10.gif" },
                        { value: "[发怒]", url: "http://crm.wqc.so/assets/expression/11.gif" },
                        { value: "[调皮]", url: "http://crm.wqc.so/assets/expression/12.gif" },
                        { value: "[呲牙]", url: "http://crm.wqc.so/assets/expression/13.gif" },
                        { value: "[惊讶]", url: "http://crm.wqc.so/assets/expression/14.gif" },
                        { value: "[难过]", url: "http://crm.wqc.so/assets/expression/15.gif" },
                        { value: "[酷]", url: "http://crm.wqc.so/assets/expression/16.gif" },
                        { value: "[冷汗]", url: "http://crm.wqc.so/assets/expression/17.gif" },
                        { value: "[抓狂]", url: "http://crm.wqc.so/assets/expression/18.gif" },
                        { value: "[吐]", url: "http://crm.wqc.so/assets/expression/19.gif" },
                        { value: "[偷笑]", url: "http://crm.wqc.so/assets/expression/20.gif" },
                        { value: "[愉快]", url: "http://crm.wqc.so/assets/expression/21.gif" },
                        { value: "[白眼]", url: "http://crm.wqc.so/assets/expression/22.gif" },
                        { value: "[傲慢]", url: "http://crm.wqc.so/assets/expression/23.gif" },
                        { value: "[饥饿]", url: "http://crm.wqc.so/assets/expression/24.gif" },
                        { value: "[困]", url: "http://crm.wqc.so/assets/expression/25.gif" },
                        { value: "[惊恐]", url: "http://crm.wqc.so/assets/expression/26.gif" },
                        { value: "[流汗]", url: "http://crm.wqc.so/assets/expression/27.gif" },
                        { value: "[憨笑]", url: "http://crm.wqc.so/assets/expression/28.gif" },
                        { value: "[悠闲]", url: "http://crm.wqc.so/assets/expression/29.gif" },
                        { value: "[奋斗]", url: "http://crm.wqc.so/assets/expression/30.gif" },
                        { value: "[咒骂]", url: "http://crm.wqc.so/assets/expression/31.gif" },
                        { value: "[疑问]", url: "http://crm.wqc.so/assets/expression/32.gif" },
                        { value: "[嘘]", url: "http://crm.wqc.so/assets/expression/33.gif" },
                        { value: "[晕]", url: "http://crm.wqc.so/assets/expression/34.gif" },
                        { value: "[疯了]", url: "http://crm.wqc.so/assets/expression/35.gif" },
                        { value: "[衰]", url: "http://crm.wqc.so/assets/expression/36.gif" },
                        { value: "[骷髅]", url: "http://crm.wqc.so/assets/expression/37.gif" },
                        { value: "[敲打]", url: "http://crm.wqc.so/assets/expression/38.gif" },
                        { value: "[再见]", url: "http://crm.wqc.so/assets/expression/39.gif" },
                        { value: "[擦汗]", url: "http://crm.wqc.so/assets/expression/40.gif" },
                        { value: "[抠鼻]", url: "http://crm.wqc.so/assets/expression/41.gif" },
                        { value: "[鼓掌]", url: "http://crm.wqc.so/assets/expression/42.gif" },
                        { value: "[糗大了]", url: "http://crm.wqc.so/assets/expression/43.gif" },
                        { value: "[坏笑]", url: "http://crm.wqc.so/assets/expression/44.gif" },
                        { value: "[左哼哼]", url: "http://crm.wqc.so/assets/expression/45.gif" },
                        { value: "[右哼哼]", url: "http://crm.wqc.so/assets/expression/46.gif" },
                        { value: "[哈欠]", url: "http://crm.wqc.so/assets/expression/47.gif" },
                        { value: "[鄙视]", url: "http://crm.wqc.so/assets/expression/48.gif" },
                        { value: "[委屈]", url: "http://crm.wqc.so/assets/expression/49.gif" },
                        { value: "[快哭了]", url: "http://crm.wqc.so/assets/expression/50.gif" },
                        { value: "[阴险]", url: "http://crm.wqc.so/assets/expression/51.gif" },
                        { value: "[亲亲]", url: "http://crm.wqc.so/assets/expression/52.gif" },
                        { value: "[吓]", url: "http://crm.wqc.so/assets/expression/53.gif" },
                        { value: "[可怜]", url: "http://crm.wqc.so/assets/expression/54.gif" },
                        { value: "[菜刀]", url: "http://crm.wqc.so/assets/expression/55.gif" },
                        { value: "[西瓜]", url: "http://crm.wqc.so/assets/expression/56.gif" },
                        { value: "[啤酒]", url: "http://crm.wqc.so/assets/expression/57.gif" },
                        { value: "[篮球]", url: "http://crm.wqc.so/assets/expression/58.gif" },
                        { value: "[乒乓]", url: "http://crm.wqc.so/assets/expression/59.gif" },
                        { value: "[咖啡]", url: "http://crm.wqc.so/assets/expression/60.gif" },
                        { value: "[饭]", url: "http://crm.wqc.so/assets/expression/61.gif" },
                        { value: "[猪头]", url: "http://crm.wqc.so/assets/expression/62.gif" },
                        { value: "[玫瑰]", url: "http://crm.wqc.so/assets/expression/63.gif" },
                        { value: "[凋谢]", url: "http://crm.wqc.so/assets/expression/64.gif" },
                        { value: "[嘴唇]", url: "http://crm.wqc.so/assets/expression/65.gif" },
                        { value: "[爱心]", url: "http://crm.wqc.so/assets/expression/66.gif" },
                        { value: "[心碎]", url: "http://crm.wqc.so/assets/expression/67.gif" },
                        { value: "[蛋糕]", url: "http://crm.wqc.so/assets/expression/68.gif" },
                        { value: "[闪电]", url: "http://crm.wqc.so/assets/expression/69.gif" },
                        { value: "[炸弹]", url: "http://crm.wqc.so/assets/expression/70.gif" },
                        { value: "[刀]", url: "http://crm.wqc.so/assets/expression/71.gif" },
                        { value: "[足球]", url: "http://crm.wqc.so/assets/expression/72.gif" },
                        { value: "[瓢虫]", url: "http://crm.wqc.so/assets/expression/73.gif" },
                        { value: "[便便]", url: "http://crm.wqc.so/assets/expression/74.gif" },
                        { value: "[月亮]", url: "http://crm.wqc.so/assets/expression/75.gif" },
                        { value: "[太阳]", url: "http://crm.wqc.so/assets/expression/76.gif" },
                        { value: "[礼物]", url: "http://crm.wqc.so/assets/expression/77.gif" },
                        { value: "[拥抱]", url: "http://crm.wqc.so/assets/expression/78.gif" },
                        { value: "[强]", url: "http://crm.wqc.so/assets/expression/79.gif" },
                        { value: "[弱]", url: "http://crm.wqc.so/assets/expression/80.gif" },
                        { value: "[握手]", url: "http://crm.wqc.so/assets/expression/81.gif" },
                        { value: "[胜利]", url: "http://crm.wqc.so/assets/expression/82.gif" },
                        { value: "[抱拳]", url: "http://crm.wqc.so/assets/expression/83.gif" },
                        { value: "[勾引]", url: "http://crm.wqc.so/assets/expression/84.gif" },
                        { value: "[拳头]", url: "http://crm.wqc.so/assets/expression/85.gif" },
                        { value: "[差劲]", url: "http://crm.wqc.so/assets/expression/86.gif" },
                        { value: "[爱你]", url: "http://crm.wqc.so/assets/expression/87.gif" },
                        { value: "[NO]", url: "http://crm.wqc.so/assets/expression/88.gif" },
                        { value: "[OK]", url: "http://crm.wqc.so/assets/expression/89.gif" },
                        { value: "[爱情]", url: "http://crm.wqc.so/assets/expression/90.gif" },
                        { value: "[飞吻]", url: "http://crm.wqc.so/assets/expression/91.gif" },
                        { value: "[跳跳]", url: "http://crm.wqc.so/assets/expression/92.gif" },
                        { value: "[发抖]", url: "http://crm.wqc.so/assets/expression/93.gif" },
                        { value: "[怄火]", url: "http://crm.wqc.so/assets/expression/94.gif" },
                        { value: "[转圈]", url: "http://crm.wqc.so/assets/expression/95.gif" },
                        { value: "[磕头]", url: "http://crm.wqc.so/assets/expression/96.gif" },
                        { value: "[回头]", url: "http://crm.wqc.so/assets/expression/97.gif" },
                        { value: "[跳绳]", url: "http://crm.wqc.so/assets/expression/98.gif" },
                        { value: "[挥手]", url: "http://crm.wqc.so/assets/expression/99.gif" },
                        { value: "[激动]", url: "http://crm.wqc.so/assets/expression/100.gif" },
                        { value: "[街舞]", url: "http://crm.wqc.so/assets/expression/101.gif" },
                        { value: "[献吻]", url: "http://crm.wqc.so/assets/expression/102.gif" },
                        { value: "[左太极]", url: "http://crm.wqc.so/assets/expression/103.gif" },
                        { value: "[右太极]", url: "http://crm.wqc.so/assets/expression/104.gif" },
                    ]
                },
                text:''
            };
        },
        created: function() {

            window.$vm = window.$vm || {};
            $vm.MsgBox = this;
            if(!$vm.Index){
                $vm.MsgBox.$router.push({path:'/index'})
            }
            $vm.MsgBox.$fn.isLogin((status)=>{
                if(status == -1){//当前未登陆
                    $vm.MsgBox.$router.push({path:'/login'})//跳转到登陆页面
                    return;
                }
                $vm.MsgBox.cs_user = $vm.MsgBox.$fn.getCookie('user');
                $vm.MsgBox.msg_user = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                $vm.MsgBox.$socket.emit('re_connect', {
                    user:$vm.MsgBox.cs_user,type:1003
                });
            });
        },
        updated () {
            $vm.MsgBox.$refs.msglist.scrollTop=999999999999999;
            $vm.MsgBox.$previewRefresh()
        },
        methods:{
            stopdefault:()=>{},
            openChatRecord:function(){
                console.log('打开聊天记录');
                $vm.MsgBox.$router.push({path:'/chatrecord/'+$vm.MsgBox.$route.params.userId})
            },
            addendFaces:function(value){
                console.log(1);
                var str = $($vm.MsgBox.$refs.msg_input).val();
                $($vm.MsgBox.$refs.msg_input).val(str + value)
                $vm.MsgBox.msg_user.msg_input = $($vm.MsgBox.$refs.msg_input).val()
                $vm.MsgBox.$forceUpdate()
            },
            msgBoxGoBack:function(){
                $vm.MsgBox.$router.back(-1)
            },
            openMsgBoxItem:function(type){
                $vm.MsgBox.isshow.msg_box_item.isopen = true;
                $vm.MsgBox.isshow.msg_box_item.type = type;
                $('#msg_box .optbox')[0].focus();
            },
            closeMsgBoxItem:function(){
                $vm.MsgBox.isshow.msg_box_item.isopen = false;
                $vm.MsgBox.isshow.msg_box_item.isopen = '';
            },
            enterMsg:function(event){
                if(event.shiftKey && event.keyCode == 13) {
                    console.log('回车');
                    return;
                }
                if(event.keyCode == 13){
                    $vm.MsgBox.sendTextMsg();
                    event.preventDefault();  
                }
            },
            startRecord:function(){//发送语音消息
                this.$toast('暂时不支持语音发送');
            },
            sendPicMsg:function(files){//发送图片消息
                console.log($vm.MsgBox.$fn.getObjectURL(files.file));
                var msgObj = {
                    appid:$vm.MsgBox.cs_user.appid,
                    openid:$vm.MsgBox.msg_user.openid,
                    cs_id:$vm.MsgBox.cs_user.id,
                    type:'image',
                    image:files.file,
                    content:$vm.MsgBox.$fn.getObjectURL(files.file),
                    send_type:1002,
                    send_time:Date.parse(new Date()) / 1000,
                    send_state:2
                }
                console.log(msgObj);
                var formdata = new FormData();
                formdata.append("appid", msgObj.appid);
                formdata.append("openid", msgObj.openid);
                formdata.append("cs_id", msgObj.cs_id);
                formdata.append("image", msgObj.image);
                formdata.append("type", msgObj.type);
                var result = $vm.MsgBox.$fn.addUserMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId,msgObj);

                // var result = $vm.MsgBox.$fn.addUserMsgList($vm.MsgBox.$route.params.userId,msgObj);
                if(result.status == 1){
                    $vm.MsgBox.msg_user = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                    $.ajax({
                        url: $vm.MsgBox.URL.server+'/api/User/sengImgForUser',
                        type: 'POST',
                        cache: false,
                        data: formdata,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        beforeSend: function (res) {
                            
                        },
                        success: function (res) {
                            console.log(res);
                            if(typeof res == "string"){
                                res = JSON.parse(res);
                            }
                            var getUserMsg = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                            
                            if(res.status == 1){
                                getUserMsg.msg_list[result.index].send_state = 1;
                                getUserMsg.msg_list[result.index].content = $vm.MsgBox.URL.server+res.path;
                            }else{
                                getUserMsg.msg_list[result.index].send_state = 0
                            }
                            $vm.MsgBox.$fn.updataMsgList($vm.MsgBox.cs_user.id,getUserMsg.user_id,getUserMsg);
                            $vm.MsgBox.msg_user = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                            $vm.MsgBox.$forceUpdate()
                        }
                    });


                }
            },
            sendTextMsg:function(){//发送文字消息
                var str = $vm.MsgBox.msg_user.msg_input;
                $vm.MsgBox.msg_user.msg_input = '';
                if($vm.MsgBox.$fn.Trim(str,'') == '' || str == ''){
                    $vm.MsgBox.$toast('不能发送空白消息！');
                    return;
                }
                var msgObj = {
                    appid:$vm.MsgBox.cs_user.appid,
                    openid:$vm.MsgBox.msg_user.openid,
                    cs_id:$vm.MsgBox.cs_user.id,
                    type:'text',
                    content:str,
                    send_type:1002,
                    send_time:Date.parse(new Date()) / 1000,
                    send_state:2
                }
                var result = $vm.MsgBox.$fn.addUserMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId,msgObj);
                if(result.status == 1){
                    $vm.MsgBox.msg_user = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                    $.post($vm.MsgBox.URL.server+'/api/User/sengMsgForUser',msgObj,(res)=>{
                        console.log($vm.MsgBox.$route.params.userId);
                        var getUserMsg = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                        var res = JSON.parse(res);
                        console.log(result);
                        console.log(getUserMsg.msg_list[result.index]);
                        if(res.status == 1){
                            getUserMsg.msg_list[result.index].send_state = 1
                        }else{
                            getUserMsg.msg_list[result.index].send_state = 0
                        }
                        $vm.MsgBox.$fn.updataMsgList($vm.MsgBox.cs_user.id,getUserMsg.user_id,getUserMsg);
                        $vm.MsgBox.msg_user = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                        $vm.MsgBox.$forceUpdate()
                    });
                }
            }
        },
        sockets:{
            disConnects:function(){
                window.location.reload();
            },
            re_connect:(data)=>{
                console.log(data);
                if(data.status == 1){
                    $.get($vm.MsgBox.URL.server+'/api/login/online',{id:$vm.MsgBox.cs_user.id},function(res){
                        if(res.status == 1){
                            console.log(111111);
                            $vm.MsgBox.cs_user.type = 1;
                            $vm.MsgBox.$fn.setCookie('user',$vm.Index.cs_user);
                        }
                        $vm.MsgBox.pagesLoad = false;
                        $vm.MsgBox.$forceUpdate()
                    });
                }
            },
            sendMsg:(data)=>{
                console.log(data);
                data.send_state = 1;
                var isInUserList = null,
                    isInMsgUserList = null,
                    isInCurrently = null,
                    userInfo = null;

                if(isInUserList != null){
                    userInfo = $vm.Index.user_list.list[isInUserList];
                }
                new Promise(function(success,error){
                    
                    if(userInfo == null){
                        $.get($vm.Index.URL.server+'/api/User/getSqlUserInfo',{openid:data.openid},function(res){
                            userInfo = JSON.parse(res);
                            if($vm.Index){
                                $vm.Index.user_list.list.push(userInfo);
                            }
                            success(userInfo);
                        }); 
                    }else{
                        success(userInfo);
                    }
                    
                }).then((userInfo)=>{
                    $vm.Index.msg_user_list.list.some(function(item,index){
                        if(item.openid == data.openid){
                            isInMsgUserList = index
                            return true;
                        }
                        return false;
                    });
                    
                    if(isInMsgUserList == null){
                        $vm.Index.$fn.addMsgList($vm.MsgBox.cs_user.id,userInfo);
                        $vm.Index.msg_user_list.list = $vm.Index.$fn.getMsgList($vm.MsgBox.cs_user.id);
                        isInMsgUserList = $vm.Index.msg_user_list.list.length - 1;
                    }
                    var result = $vm.Index.$fn.addUserMsgList($vm.MsgBox.cs_user.id,userInfo.user_id,data);
                    if(result.status == 1){
                        $vm.Index.msg_user_list.list = $vm.Index.$fn.getMsgList($vm.MsgBox.cs_user.id);
                        
                    }
                    if(parseInt($vm.MsgBox.$route.params.userId) == userInfo.user_id){
                        $vm.Index.msg_user_list.list[isInMsgUserList].new_msg_num = 0;
                        $vm.MsgBox.msg_user = $vm.MsgBox.$fn.getMsgList($vm.MsgBox.cs_user.id,$vm.MsgBox.$route.params.userId);
                        console.log($vm.MsgBox.msg_user);
                    }
                    if(data.type=="subscribe"){
                       $vm.MsgBox.$refs.subscribe.play();
                    }else if(data.type=="unsubscribe"){
                       $vm.MsgBox.$refs.unsubscribe.play();
                    }else{
                        $vm.MsgBox.$refs.newmsg.play();
                    }
                })
            }
        }
    };
</script>

<style lang="less">
    *{font-family: 微软雅黑;}

    #msg_box{
        width:100vw;height:100%;position: fixed;top:0;left:0;z-index: 9;background:#fff;
        .top{
            height:44px;background:#ffffff;border-bottom: 1px solid #d4d4d4;
            i{
                color:#000;font-weight: 600;
            }
        }
        .msg{
            position: absolute;top:45px;bottom:50px;background:#f2f2f2;width:100%;overflow: hidden;overflow-y: auto;
            transition:all 0.1s;
            &.open{
                bottom:250px;
            }
            .list{
                .item{
                    margin:27px 0;padding:0 10px;
                    .tips{
                        text-align: center;
                        span{
                            display: inline-block;max-width: 220px;font-size: 12px;padding:2px 15px;border-radius: 10px;background:#999;color:#fff;
                        }
                    }
                    &::after{
                        content: "";display: block;clear: both;
                    }
                    .headpic{
                        width:50px;height:50px;float:left;
                        img{
                            width:100%;height:100%;border-radius:50%;
                        }
                    }
                    .content{
                        display: inline-block;max-width:60%;margin-left: 14px;margin-top:10px;padding:8px 10px;border-radius:5px;position: relative;
                        &::after{
                            content: "";width:0;height:0;border:solid #fff 5px;border-width: 5px 8px;border-color:transparent #fff transparent transparent;
                            position: absolute;top:15px;left:-16px;
                        }
                        .status{
                            position:absolute;width:20px;height:20px;border-radius:50%;
                            text-align:center;line-height:20px;
                            top:10px;left:-25px;
                            &[type="2"]{//发送中
                                background:url('../assets/loading.gif');background-size:100% 100%;
                            }
                            &[type="1"]{//发送完成
                                
                            }
                            &[type="0"]::after{
                                content:'!'
                            }
                            &[type="0"]{//失败
                                background:red;color:#fff;
                            }
                        }
                        pre{
                            display: inline-block;margin:0;white-space: pre-wrap; text-align: justify;font-size: 16px;line-height: 1.5em;
                            color:#252525;
                        }
                        &.pic{
                            padding:3px;font-size:0px;
                        }
                        .msgpic{
                            max-width:100px;max-height:200px;
                        }
                    }
                    &[type="1001"]{
                        .content{
                            background:#ffffff;
                        }
                    }
                    &[type="1002"]{
                        .content{
                            background:#6098f9;float: right;margin-left: 0;margin-right: 14px;
                            &::after{
                                left:auto;right:-16px;border-color:transparent transparent transparent #6098f9;
                            }
                        }
                        .headpic{
                            float: right;
                        }
                    }
                }
            }
        }
        .input{
            height:50px;background:#fff;position: absolute;bottom:0px;font-size:0px;line-height:50px;width:100%;
            box-shadow: 0 1px 3px #acacac;transition:all 0.1s;
            &.open{
                bottom:200px;
            }
            .opt_btn{
                display:inline-block;width:40px;text-align:center;line-height:50px;
                img{
                    width:24px;height:24px;margin:7px 0;padding:6px;
                }
            }
            .right{
                display:none;
            }
            button{
                font-size: 12px;height:30px;margin:10px 2px;line-height: 28px;vertical-align: top;
                background:#0f85ff;border:none;color:#fff;width:36px;border-radius:3px;padding:0 5px;
                &:active{
                    background:#0c6acf;
                }
            }
            input{
                font-size: 14px;background:#f2f2f2;border:none;border-radius: 5px;margin:0;padding:0;line-height: 36px;
                width:calc(100% - 150px);margin:7px 5px;height:36px;vertical-align: top;padding:0 10px;
                &::-webkit-input-placeholder{
                    color:#cacaca;
                }
            }
        }
        .optbox{
            height:200px;position: absolute;bottom:-200px;width:100%;transition:all 0.1s;outline:none;
            &.open{
                bottom:0px;
            }
            &[type="more"]{
                .item{
                    text-align:center;font-size:0;margin:10px 0;
                    .icon{
                        display:inline-block;background:#f2f2f2;margin:0 10px;text-align:center;width:60px;height:60px;border-radius:8px;
                        img{
                            width:30px;height:30px;margin:10px;padding:5px;
                        }
                    }
                    span{
                        font-size:14px;display:block;line-height:16px;
                    }
                }
            }
            &[type="voice"]{
                display: flex;
                span{
                    width:100px;height:100px;display:inline-block;margin:auto;border-radius:50%;text-align: center;
                    // background: -webkit-radial-gradient(#6098f9,#7bc1fd); /* Safari 5.1 - 6.0 */
                    // background: -o-radial-gradient(#6098f9,#7bc1fd); /* Opera 11.6 - 12.0 */
                    // background: -moz-radial-gradient(#6098f9,#7bc1fd); /* Firefox 3.6 - 15 */
                    background: radial-gradient(#6098f9,#7bc1fd); /* 标准的语法 */
                    &:active{
                        background: radial-gradient(#7bc1fd,#6098f9); /* 标准的语法 */
                    }
                    img{
                        display:inline-block;width:40px;height:40px;margin:30px;
                    }
                }
            }
            &[type="faces"]{
                overflow:hidden;overflow-y:auto;
                .imgpic{
                    text-align:justify;
                    img{
                        display:inline-block;width:25px;height:25px;padding:5px;
                    }
                }
            }
        }
    }
</style>
